<template>
	<div class="container">
		<div class="firstpage">
			<div class="header">
				<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tf&skin=pitaya" frameborder="0" width="400"
					height="24" allowtransparency="true"></iframe>
			</div>
			<div class="loginbox">
				<div class="loginboxson" @click="toLogin" @yingdaologin="increase" v-if="loginbtnshow">
					登录
				</div>
				<el-dropdown v-else>
					<el-button type="primary" class="userimgbtn">
						<img :src="userheaderimg" alt="用户头像">
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="router.push({ path: '/myself' })">个人中心</el-dropdown-item>
							<el-dropdown-item @click="dialogFormVisible = true">收藏网页</el-dropdown-item>
							<el-dropdown-item @click="goout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<!-- 收藏网页地址 -->
			<el-dialog v-model="dialogFormVisible" title="收藏网页" class="urlbigbox" width="80vw">
				<el-form :model="form">
					<el-form-item label="名称" :label-width="formLabelWidth">
						<el-input v-model="tit" autocomplete="off" />
					</el-form-item>
					<el-form-item label="网页地址" :label-width="formLabelWidth">
						<el-input v-model="Linkaddress" autocomplete="off" />
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取消</el-button>
						<el-button type="primary" @click="addUserList">
							确认
						</el-button>
					</span>
				</template>
			</el-dialog>
			<div class="timebox">
				<div class="timeboxson">{{ time }}</div>
				<div class="daybox">{{ datetime }} &emsp;{{ week }}</div>
			</div>
			<!-- 论坛入口 -->
			<div class="gotuluntanbox" @click="router.push({ path: '/homepage' })">前往论坛</div>
			<!-- 搜索 -->
			<div class="search">
				<div class="SearchOptions" id="btn" @click="boxshow">
					<img :src="logoimg" alt />
				</div>
				<div class="gotobox">
					<input type="search" placeholder="输入并搜索" v-model="ssnr" />
					<button type="button" class="iconsearch" @click="tiaozhuhan"><i
							class="iconfont icon-sousuo1"></i></button>
				</div>
			</div>
			<div class="buttonStyle" style="color: white;">
				<div v-show="show1" @click="clickTrue"><el-icon :size="25">
						<Grid />
					</el-icon></div>
				<div v-show="!show1" @click="clickFalse">
					<el-icon :size="25">
						<MoreFilled />
					</el-icon>
				</div>
			</div>
			<div class="dropdown-content" v-show="SearchEnginesShow">
				<ul>
					<li v-for="(i, index) in state" :key="index" @click="tankuang(i)">
						<img :src=i.img />
						<p>{{ i.value }}</p>
					</li>
				</ul>
			</div>
			<div class="foot" v-show="show1">
				<el-carousel indicator-position="outside" :interval="5000" height="70px" arrow="never">
					<el-carousel-item v-for="item in shiyan" :key="item" class="bannerbox">
						<div class="logobox" v-for="j in item" :key="j">
							<span @click="labellistDelet(j._id)">
								<el-icon class="urlico">
									<CircleCloseFilled />
								</el-icon>
							</span>
							<a :href="j.url" id="foot_a">
								<img :src="j.img" />
							</a>
						</div>
						<div class="logobox">
							<el-icon class="addicom" @click="dialogFormVisible = true">
								<Plus />
							</el-icon>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="xiaozujianbigbox" v-show="!show1">
				<div class="xiaozujian">
					<!-- 引导 -->
					<div class="threetwo">
						<div class="yindao">
							<div class="first-lab">
								<span>引导</span><span><el-icon :size="25">
										<ElemeFilled />
									</el-icon></span>
							</div>
							<div class="first-options">
								<div @click="yindaoboxshow = true">
									<el-icon :size="25" class="icon">
										<VideoCameraFilled />
									</el-icon>
									<p>玩转引导</p>
								</div>
								<div @click="zujiansureboxshowf">
									<el-icon :size="25" class="icon">
										<List />
									</el-icon>

									<p>组件开关</p>
								</div>
								<div @click="login()">
									<el-icon :size="25" class="icon">
										<Stamp />
									</el-icon>
									<p>点击登录</p>
								</div>
							</div>
							<el-drawer v-model="zujiansureboxshow" title="开关组件" :with-header="300" size="350"
								destroy-on-close="false" :before-close="zujianhandleClose">
								<div class="zujiankonhzhibox">
									<span>阿里云</span> <el-switch v-model="zujianlist.aliyun" :inactive-value="false"
										:active-value="true" />|
									<span>下班倒计时</span> <el-switch v-model="zujianlist.xiaobantime" :inactive-value="false"
										:active-value="true" />
								</div>
								<div class="zujiankonhzhibox">
									<span>Gitee</span> <el-switch v-model="zujianlist.gitee" :inactive-value="false"
										:active-value="true" />|
									<span>哔哩哔哩</span> <el-switch v-model="zujianlist.bilibili" :inactive-value="false"
										:active-value="true" />
								</div>
								<div class="zujiankonhzhibox">
									<span>写作猫</span> <el-switch v-model="zujianlist.xiezuomao" />|
									<span>中国大学</span> <el-switch v-model="zujianlist.mooc" />
								</div>
								<div class="zujiankonhzhibox">
									<span>功德无量</span> <el-switch v-model="zujianlist.gongde" />|
									<span>腾讯云</span> <el-switch v-model="zujianlist.tengxunyun" />
								</div>
								<div class="zujiankonhzhibox">
									<span>羊了个羊</span> <el-switch v-model="zujianlist.yanglegeyang" />|
									<span>随笔</span> <el-switch v-model="zujianlist.suibi" />
								</div>
								<div class="zujiankonhzhibox">
									<span>抖音</span> <el-switch v-model="zujianlist.douying" />|
									<span>PPT神器</span> <el-switch v-model="zujianlist.pptshengqi" />
								</div>
								<div class="zujiankonhzhibox">
									<span>摸鱼日历</span> <el-switch v-model="zujianlist.moyurili" />|
									<span>摄图网</span> <el-switch v-model="zujianlist.shetuwang" />
								</div>
								<div class="zujiankonhzhibox">
									<span>果核剥壳</span> <el-switch v-model="zujianlist.guohebaoke" />|
									<span>熊猫办公</span> <el-switch v-model="zujianlist.xiongmaobangong" />
								</div>
							</el-drawer>
						</div>
						<p>玩转引导</p>
						<el-dialog v-model="yindaoboxshow" title="欢迎来到引导界面">
							<el-carousel height="150px">
								<el-carousel-item v-for="item in 4" :key="item" style="background-color: #99a9bf;">
									这里放演示图{{ item }}
								</el-carousel-item>
							</el-carousel>
						</el-dialog>
					</div>
					<div class="oneone" v-if="zujianlist.gitee || true">
						<a href="https://gitee.com/" target="_blank">
							<img src="/img/gitee.jpg" alt="gitee">
							<p>gitee</p>
						</a>
					</div>
					<div class="twotwo" v-if="zujianlist.bilibili">
						<div class="bilibili-box">
							<div class="bili-top-box">
								<div class="bili-sou">
									<input v-model="searchValue" class="bili-top-inp" type="search" placeholder="搜一搜～"
										@keyup.enter="handleEnterKeyFilter">
								</div>
								<div class="logo-box"><img @click="handleEnterKeyFilter" class="bili-top-logo"
										src="https://img.zhuayuya.com/icon_/bilibililogo.svg" alt="">
								</div>
							</div>

							<div class="bili-button-box">
								<a href="https://www.bilibili.com/ " target="_blank">
									<div class="bili-button-open" @click="toBlibli">OPEN</div>
								</a>
								<a href="https://www.bilibili.com/v/popular/all/" target="_blank">
									<div class="bili-button-sart" @click="toremen">
										<img src="https://img.zhuayuya.com/icon_/bilibilizuihuo.svg" alt="图">
									</div>
								</a>
								<a href="https://www.bilibili.com/" target="_blank">
									<div class="bili-button-collect" data-v-5c940bb5="">
										<img src="https://img.zhuayuya.com/icon_/bilibilishoucang.svg" alt="">
									</div>
								</a>
							</div>

							<div class="bili-centre-box">
								<iframe class="bili-centre-if"
									style="width: 150px; height: 85px;margin: 4px;border-radius: 20px;border: 0;"
									src="//player.bilibili.com/player.html?aid=900054017&amp;bvid=BV1YP4y1f7Mw&amp;cid=819397981&amp;page=1&amp;danmaku=0"></iframe>
							</div>
						</div>
						<p>哔哩哔哩</p>
					</div>
					<div class="oneone" v-if="zujianlist.xiezuomao || false">
						<a href="https://xiezuocat.com/" target="_blank">
							<img src="/img/xiezuomao.jpg" alt="写作猫">
							<p>写作猫</p>
						</a>
					</div>
					<div class="oneone" v-if="zujianlist.mooc || false">
						<a href="https://www.icourse163.org/" target="_blank">
							<img src="/img/mooc.jpg" alt="中国大学">
							<p>中国大学</p>
						</a>
					</div>
					<div class="twotwo" v-if="zujianlist.gongde || false">
						<div class="gongde">
							<span class="gongdetext">
								积攒功德:{{ gongdedian }}
							</span>
							<img src="/img/muyu.png" alt="木鱼" @click="gongdeadd">
						</div>
						<p>功德无量</p>
					</div>
					<div class="oneone" v-if="zujianlist.tengxunyun || false">
						<a href="https://cloud.tencent.com/" target="_blank">
							<img src="/img/tengxunyun.png" alt="腾讯云">
							<p>腾讯云</p>
						</a>
					</div>
					<div class="oneone" v-if="zujianlist.yanglegeyang || false">
						<a href="https://y.uoxn.com" target="_blank">
							<img src="/img/yangyang.jpg" alt="羊了个羊">
							<p>羊了个羊</p>
						</a>
					</div>
					<div class="threetwo" v-if="zujianlist.suibi || false">
						<div class="suibixiaoji" @click="suibidrawer = true">
							<div class="suibileft">
								<p> 随笔</p>
								<el-icon>
									<Promotion />
								</el-icon>
							</div>
							<div class="suibiright">
								<p><span></span>随时随地记录美好</p>
								<div class="suibiinput">{{ suibilist[0].suibitext }}</div>
							</div>
							<el-drawer v-model="suibidrawer" title="随笔日记" :with-header="300" size="350">
								<el-input :autosize="{ minRows: 5, maxRows: 30 }" v-model="suibitext" type="textarea"
									placeholder="请输入内容" class="suibifabu" />
								<el-button type="primary" round @click="upsuibi">完成
									<el-icon>
										<Promotion />
									</el-icon>
								</el-button>
								<div class="suibilistbox">
									<div v-for="item in suibilist" :key="item._id" class="listflex">
										<p class="listsonbox">{{ item.suibitext }}</p><el-button v-show="item._id"
											type="primary" :icon="Delete" circle @click="deletesuibi(item._id)" />
									</div>
								</div>
							</el-drawer>
						</div>
						<p>随笔小记</p>
					</div>
					<div class="oneone" v-if="zujianlist.douying || false">
						<a href="https://www.douyin.com/" target="_blank">
							<img src="/img/dy.png" alt="抖音">
							<p>抖音</p>
						</a>
					</div>
					<div class="oneone" v-if="zujianlist.pptshengqi || false">
						<a href="https://www.islide.cc/" target="_blank">
							<img src="/img/islide.png" alt="PPT神器">
							<p>PPT神器</p>
						</a>
					</div>
					<div class="twotwo" v-if="zujianlist.xiaobantime || false">
						<div class="xiabantime">
							<span>{{ daojishi ? daojishi : "00:00:00" }}</span>
							<div class="timesurebox">
								<div class="xuanzebox">
									<el-time-picker style="width:100%" v-model="xiabanshijian" clearable="false"
										id="shijian" placeholder="选择下班时间" />
								</div>
								<div class="btnbox" @click="timesure">
									开始
								</div>
							</div>
						</div>
						<p>下班倒计时</p>
					</div>

					<div class="twoone" v-if="zujianlist.moyurili || false">
						<div class="moyurenriji">
							<p>时间间隔最近的假期<br><b>{{ moyulist.name }}</b> : <b>{{ moyulist.rest }}天</b></p>
							<div class="moyutitbox">
								<el-button size="small" text @click="moyurilishow = true">摸鱼日历<el-icon>
										<DArrowRight />
									</el-icon></el-button>
							</div>
							<el-dialog draggable="true" v-model="moyurilishow" width="520px">
								<template #footer>
									<span class="dialog-footer">
										<img src="https://api.iwyu.com/API/moyu" alt="摸鱼日历" v-if="moyurilishow"
											style="margin: -85px 0 -15px 0;width: 480px;">
									</span>
								</template>
							</el-dialog>
						</div>
						<p>摸鱼日历</p>
					</div>
					<div class="oneone" v-if="zujianlist.aliyun || false">
						<a href="https://www.aliyun.com/" target="_blank">
							<img src="/img/aliyun.jpg" alt="阿里云">
							<p>阿里云</p>
						</a>
					</div>
					<div class="oneone" v-if="zujianlist.shetuwang || false">
						<a href="https://699pic.com/" target="_blank">
							<img src="/img/shetu.jpg" alt="摄图网">
							<p>摄图网</p>
						</a>
					</div>
					<div class="oneone" v-if="zujianlist.xiongmaobangong || false">
						<a href="https://www.tukuppt.com/ppt/" target="_blank">
							<img src="/img/xiongmaobangong.jpg" alt="熊猫办公">
							<p>熊猫办公</p>
						</a>
					</div>
					<div class="oneone" v-if="zujianlist.guohebaoke || false">
						<a href="https://www.ghxi.com/" target="_blank">
							<img src="/img/guohe.png" alt="果核剥壳">
							<p>果核剥壳</p>
						</a>
					</div>
				</div>
			</div>


		</div>
		<!-- 登录面板 -->
		<div v-if="loginbox.loginboxshow" class="bigbox">
			<el-button :icon="Close" circle class="closebtn" @click="loginbox.loginboxshow = false" />
			<!-- <el-icon><Close /></el-icon> -->
			<div class="form-structor">
				<div :class="denglu">
					<h2 class="form-title" id="signup" @click="denglubtn"><span>或</span>登录</h2>
					<div class="form-holder">
						<input type="text" class="input" placeholder="用户名" v-model="username" />
						<input type="password" class="input" placeholder="密码" v-model="password" />
					</div>
					<button class="submit-btn" @click="onSubmit">登录</button>
					<button class="submit-btn" @click="loginbox.loginboxshow = false">我就看看不登录</button>
				</div>
				<div :class="zhuce">
					<div class="center">
						<h2 class="form-title" id="login" @click="zhucebtn"><span>或</span>注册</h2>
						头像：<img :src="imgsrc" class="headimg">
						<div class="form-holder">
							<input type="text" class="input" placeholder="用户名" v-model="username" />
							<input type="password" class="input" placeholder="密码" v-model="password" />
							<input type="text" class="input" placeholder="昵称" v-model="nick" />
						</div>
						<div class="shangchuanbox">
							<span>上传头像</span><input type="file" name="productImg" :onchange="getimgsrc" class="upinput">
						</div>
						<button class="submit-btn" @click="gotoSubmit">注册</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<Listsort></Listsort>
</template>

<script setup>
import { Close, Delete } from '@element-plus/icons-vue'
import { loginShowStore } from '@/stores/loginshow.js'
import { gotodeletesuibi, tianjiasuibi, GetSuibiList } from '../api/suibi.js'
import { ref, onMounted, watch } from 'vue';
import Listsort from "./homes/Listsort.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import { RequestMemberLogin, RequestonLogin, getxiaolist, xiugaixiaolist } from '../api/user.js'
import { GetUrlList, GetUrlListDelet, subUrlList } from '../api/urllist'
// 路由
import { useRouter } from 'vue-router'
const router = useRouter();
const zujianlist = ref({ aliyun: true, xiaobantime: true, gitee: false, bilibili: true, xiezuomao: true, mooc: true, gongde: true, tengxunyun: true, yanglegeyang: true, suibi: true, douying: true, pptshengqi: true, moyurili: true, shetuwang: true, xiongmaobangong: true, guohebaoke: true })
// 小组件组件
const zujiansureboxshowf = () => {
	if (localStorage.getItem("user")) {
		zujiansureboxshow.value = true
		zujianrightboxoffandno()
	} else {
		ElMessage('请先完成登录才可以使用此功能')
	}
}
const zujianhandleClose = (done) => {
	xiugaixiaolist(JSON.parse(localStorage.getItem("user"))._id, zujianlist.value)
	done()
}
//状态管理
const loginbox = loginShowStore
//用户头像渲染地址
const userheaderimg = ref('/img/userheaderimg.jpeg')
const user = ref([])
// 当前时间
const time = ref('');
const datetime = ref('');
const week = ref('');
//地址输入框显示
const dialogFormVisible = ref(false)
const formLabelWidth = '70px'
//搜索引擎前缀
const goooo = ref('https://www.baidu.com/s?wd=')
//搜索引擎图标
const logoimg = ref('img/baidu.png')
//搜索引擎列表展示
const SearchEnginesShow = ref(false)
//搜索内容
const ssnr = ref('')
//传入搜索引擎的内容
const gotosousuo = ref("https://www.baidu.com/s?wd=")
// 收藏地址
const tit = ref('')
const Linkaddress = ref("")
var Iconaddress = ''
//登录页面展示
const loginbtnshow = ref(true)
// 注册及登录
const username = ref('')
const password = ref('')
const nick = ref('')
const denglu = ref("signup")
const zhuce = ref("login slide-up")
const imgsrc = ref('/img/userheaderimg.jpeg')
//显示隐藏轮播和demo
const show1 = ref(false)
//显示隐藏轮播和demo
const clickTrue = () => {
	show1.value = false;
}
const clickFalse = () => {
	show1.value = true;
}
//获取url列表
var shiyan = ref([])
//登录面板展示
const toLogin = () => {
	loginbox.loginboxshow = !loginbox.loginboxshow
}
//搜索引擎图片及地址
const state = ref([{ img: 'img/baidu.png', value: '百度', url: 'http://www.baidu.com/s', gotu: "https://www.baidu.com/s?wd=" },
{ img: 'img/bing.png', value: 'Bing', url: 'https://cn.bing.com/s', gotu: "https://cn.bing.com/search?q=" },
{ img: 'img/sougou.png', value: '搜狗', url: 'https://www.sogou.com/s', gotu: "https://www.sogou.com/web?query=" },
{ img: 'img/360.png', value: '360', url: 'https://www.sogou.com/s', gotu: "https://www.so.com/s?q=" },
{ img: 'img/guge.png', value: 'google', url: 'https://www.sogou.com/s', gotu: "https://www.google.com.hk/search?q=" },
{ img: 'img/fsou.png', value: 'f搜', url: 'https://www.sogou.com/s', gotu: "https://fsoufsou.com/search?q=" }]);

//预览图片
const getimgsrc = () => {
	const imgg = document.querySelector("input[name='productImg']")
	let windowURL = window.URL || window.webkitURL;
	let imggg = imgg.files[0]
	imgsrc.value = windowURL.createObjectURL(imggg)
}
// 切换登录注册窗口
const denglubtn = () => {
	zhuce.value = "login  slide-up"
	denglu.value = "signup"
}
const zhucebtn = () => {
	denglu.value = "signup slide-up"
	zhuce.value = "login"
}
//注册接口
const gotoSubmit = async () => {
	const imgg = document.querySelector("input[name='productImg']")
	let imggg = imgg.files[0]
	let formDate = new FormData()
	formDate.append('username', username.value)
	formDate.append('password', password.value)
	formDate.append('nick', nick.value)
	formDate.append('gender', 3)
	formDate.append('headerImg', imggg)
	let data = await RequestonLogin(formDate)
	let { resultCode, resultInfo } = data
	if (resultCode == 1) {
		zhuce.value = "login  slide-up"
		denglu.value = "signup"
		ElMessage('注册成功请前往登录')
	} else {
		alert('失败')
	}
}
// 登录接口
const onSubmit = async () => {
	//吧输入的账号密码通过接口传给后端进行验证
	const data = await RequestMemberLogin(username.value, password.value)
	//解构接口返回的数据
	const { resultCode, resultInfo, token } = data
	// 当返回成功时触发下面的函数
	if (resultCode == 1) {
		// 1.保存用户信息
		// 2.保存token
		localStorage.setItem('TOKEN', token)
		localStorage.setItem('user', JSON.stringify(resultInfo))
		userheaderimg.value = resultInfo.headerimg
		zujianrightboxoffandno()
		loginbtnshow.value = false
		// 3.成功后登录框消失
		// loginboxshow.value = !loginboxshow.value
		ElMessage({
			message: '登录成功',
			type: "success"
		})
		loginbox.loginboxshow = !loginbox.loginboxshow
		labellist()
	} else {
		// 返回失败时弹出
		ElMessage({
			message: '用户名或密码出错！',
			type: 'warning',
		})
	}
}

//删除url
const labellistDelet = async (_id) => {
	console.log('删除url');
	let data = await GetUrlListDelet(_id)
	const { resultCode, resultInfo } = data
	if (resultCode == 1) {
		alert('删除标签', resultInfo);
		labellist()
	} else {
		alert(resultInfo)
	}
}
//添加url
var result = ''
const addUserList = async () => {
	const yuming = ['.com', '.cn', '.top', '.club', '.xyz', '.vip', '.Ltd', '.site', '.ink', '.pub', '.cloud', '.art', '.love', '.online', '.shop', '.net', '.info', '.io']
	const userID = JSON.parse(localStorage.getItem("user"))._id
	yuming.forEach((item) => {
		let index = Linkaddress.value.indexOf(item)
		if (index > 0) {
			result = Linkaddress.value.substring(0, index + item.length)
			console.log(typeof (result));
			Iconaddress = result + '/favicon.ico'
			console.log(Iconaddress);
		}
	})
	let data = await subUrlList(userID, Linkaddress.value, Iconaddress, tit.value)
	const { resultCode, resultInfo } = data
	if (resultCode == 1) {
		labellist()
		tit.value = ""
		Linkaddress.value = ""
		dialogFormVisible.value = false
		alert('添加成功')
	} else {
		alert('添加失败')
	}
}
// 显示url列表请求
const labellist = async () => {
	shiyan.value = []
	let data = await GetUrlList(JSON.parse(localStorage.getItem("user"))._id)
	const { resultCode, resultInfo } = data
	if (resultCode == 1 && resultInfo.length != 0) {
		let alist = []
		for (var i = 0; i < resultInfo.length; i++) {
			alist.push(({ url: resultInfo[i].Linkaddress, _id: resultInfo[i]._id, img: resultInfo[i].Iconaddress }));
		}
		for (var q = 0; q < alist.length; q = + 9) {
			shiyan.value.push(alist.slice(q, q + 9));
		}
	}
}

const tankuang = (i) => {
	logoimg.value = i.img
	goooo.value = i.gotu
	SearchEnginesShow.value = false
}
//点击关闭模型
const boxshow = () => {
	SearchEnginesShow.value = !SearchEnginesShow.value
};
//获取时间
const getNowTime = () => {
	let dt = new Date();
	var day = dt.getDay();
	var weeks = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
	week.value = weeks[day];
	var mt = (dt.getMonth() + 1).toString().padStart(2, '0');
	var day = dt.getDate().toString().padStart(2, '0');
	var h = dt.getHours().toString().padStart(2, '0');
	var m = dt.getMinutes().toString().padStart(2, '0');
	var s = dt.getSeconds().toString().padStart(2, '0');
	time.value = h + ':' + m + ":" + s;
	datetime.value = mt + '月' + day + '日';
};
// 引导
const zujiansureboxshow = ref(false)
const login = () => {
	if (localStorage.getItem("user")) {
		ElMessage('您已经登录了请勿重复操作，如需重新登录请先退出此账号')
	} else {
		loginbox.loginboxshow = !loginbox.loginboxshow
	}
}
//搜搜内容
const searchValue = ref('')
function handleEnterKeyFilter() {
	//回车跳转搜
	window.open('https://search.bilibili.com/all?keyword=' + searchValue.value)
}
// 功德模块
const gongdedian = ref(0)
const gongdeadd = () => {
	gongdedian.value = gongdedian.value + 1
	localStorage.setItem('GONG-DE', gongdedian.value)
}
//随笔模块
const suibidrawer = ref(false)
const suibitext = ref('')
const suibilist = ref([{
	suibitext: '快来发表些什么吧！',
	_id: false
}])
const upsuibi = async () => {
	// 添加
	if (localStorage.getItem("user")) {
		if (suibitext.value != "") {
			const userID = JSON.parse(localStorage.getItem("user"))._id
			let data = await tianjiasuibi(userID, suibitext.value)
			const { resultCode, resultInfo } = data
			if (resultCode == 1) {
				ElMessage('添加成功')
				suibitext.value = ''
				suibidrawer.value = false
				isgetsuibilist()
			} else { ElMessage({ message: '添加失败请检查网络或稍后再试', type: 'success', }) }
		} else {
			ElMessage('发布的内容不可以为空')
		}
	} else {
		ElMessage({
			message: '使用此功能需要先登录，请先登录',
			type: 'success',
		})
	}
}
const deletesuibi = async (_id) => {
	// 删除随笔
	let data = await gotodeletesuibi(_id)
	const { resultCode, resultInfo } = data
	if (resultCode == 1) {
		ElMessage('删除成功')
		isgetsuibilist()
	} else {
		ElMessage({
			message: '删除失败请检查网络或稍后再试',
			type: 'success',
		})
	}
}
const isgetsuibilist = async () => {
	if (localStorage.getItem("user")) {
		// 获取随笔列表
		const userID = JSON.parse(localStorage.getItem("user"))._id
		let data = await GetSuibiList(userID)
		const { resultCode, resultInfo } = data
		if (resultCode == 1) {
			suibilist.value = resultInfo
		} else {
			suibilist.value = [{
				suibitext: '快来发表些什么吧！',
				_id: false
			}]
		}
	} else {
		suibilist.value = [{
			suibitext: '快来发表些什么吧！',
			_id: false
		}]
	}
}
//下班倒计时模块
const xiabanshijian = ref()
const daojishi = ref("")
const timesure = () => {
	if (xiabanshijian.value < new Date() || xiabanshijian == null) {
		ElMessage('请选择的时间需大于当前时间')
		daojishi.value == "00:00:00"
		// return
	} else {
		// 确认时间
		var time = setInterval(() => {
			//获取当前时间的时间戳（单位毫秒）
			let inputTime = xiabanshijian.value
			var nowTime = +new Date();
			//把剩余时间毫秒数转化为秒
			var times = (inputTime - nowTime) / 1000;
			//计算小时数 转化为整数
			var h = parseInt(times / 60 / 60 % 24);
			//如果小时数小于 10，要变成 0 + 数字的形式
			let a = h < 0 ? 0 : h
			console.log(a);
			a = a < 10 ? "0" + a : a;
			//计算分钟数 转化为整数
			var m = parseInt(times / 60 % 60);
			//如果分钟数小于 10，要变成 0 + 数字的形式
			let b = m < 0 ? 0 : m
			b = b < 10 ? "0" + b : b;
			//计算描述 转化为整数
			var s = parseInt(times % 60);
			//如果秒钟数小于 10，要变成 0 + 数字的形式
			let c = s < 0 ? 0 : s
			c = c < 10 ? "0" + c : c;
			daojishi.value = a + ':' + b + ":" + c
			if (xiabanshijian.value < new Date()) {
				xiabanshijian.value == new Date()
				clearInterval(time)
				daojishi.value == "00:00:00"
				// return
			}
		}, 1000);
	}
}
//摸鱼日历
const moyurilishow = ref(false)
const moyulist = ref({ holiday: '空' })
const moyuday = async () => {
	let list = () => {
		$.ajax({
			url: "http://timor.tech/api/holiday/next/", //要请求的后端地址
			type: "GET", //数据发送的方式(POST或者GET)
			// data: {val1: "1", val2: "2"}, //需要传递的参数
			dataType: "json", //后端返回的数据格式
			success: function (result) {//ajax请求成功后触发的方法
				moyulist.value = result.holiday
			},
			error: function () {//ajax请求失败后触发的方法
				console.log('请求失败');
			}
		});
	}
	list()
}
// 是否显示组件列表
const zujianrightboxoffandno = async () => {
	const _id = JSON.parse(localStorage.getItem("user"))._id
	let data = await getxiaolist(_id)
	const { resultCode, resultInfo } = data
	if (resultCode == 1) {
		zujianlist.value = resultInfo[0].zujianlist
		console.log(zujianlist.value);
	}

}
//加载函数
const jiazaiwan = () => {
	gongdedian.value = Number(localStorage.getItem('GONG-DE'))
}
//搜索并跳转页面显示结果
const tiaozhuhan = () => {
	gotosousuo.value = goooo.value + '' + ssnr.value
	window.open(gotosousuo.value)
}
//退出登录
const goout = () => {
	ElMessageBox.confirm(
		'提示：退出后需要展示个人内容将要再次登录',
		'确定要退出吗？',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
		.then(() => {
			// 清空localStorag数据
			localStorage.removeItem('TOKEN');
			localStorage.removeItem('user');
			loginbtnshow.value = true
			shiyan.value = []
			zujianlist.value = {
				aliyun: true, xiaobantime: true, gitee: true, bilibili: true, xiezuomao: true, mooc: true, gongde: true, tengxunyun: true, yanglegeyang: true
				, suibi: true, douying: true, pptshengqi: true, moyurili: true, shetuwang: true, xiongmaobangong: true, guohebaoke: true
			}
			ElMessage({
				type: 'success',
				message: '退出成功',
			})

		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消成功',
			})
		})
}

// 监听搜索内容
watch(ssnr, async (newValue, oldValue) => {
	//搜索内容拼接
	gotosousuo.value = goooo.value + '' + ssnr.value
})
onMounted(() => {
	if (localStorage.getItem('user')) {
		user.value = JSON.parse(localStorage.getItem('user'))
		loginbtnshow.value = false
		userheaderimg.value = JSON.parse(localStorage.getItem('user')).headerimg
		labellist()
		zujianrightboxoffandno()
		console.log("执行");
	} else {
		loginbtnshow.value = true
	}
	getNowTime()
	setInterval(() => {
		getNowTime();
	}, 1000);
	jiazaiwan()
	isgetsuibilist()
	moyuday()
})
</script>

<style scoped lang="scss">
.container {
	overflow: hidden;

	.firstpage {
		border-top: 1px solid #739a99;
		width: 100vw;
		height: 100vh;
		min-height: 750px;
		background: #739a99;
		margin-bottom: -1px;

		.header {
			margin: 20px;
		}

		.timebox {
			text-align: center;

			.timeboxson {
				font-size: 50px;
				color: #fff;
				margin-top: 80px;
				font-weight: 600;
			}

			.daybox {
				font-size: 20px;
				color: #fff;
			}
		}
		.gotuluntanbox{
			position: absolute;
			left: 0;
			background: #fff;
			height: 100px;
			width: 30px;
			line-height: 25px;
			padding: 10px 15px 10px 0;
			text-align: center;
			border-radius: 0 40px 40px 0;
			font-weight: 700;
			color: #333;
			opacity: 0.7;
			cursor: pointer;
		}
		.dropdown-content {
			margin: 0 auto -63px;
			border-radius: 20px;
			z-index: 10;
			width: 360px;
			background: rgba(255, 255, 255, 0.7);
			text-align: center;

			ul {
				display: flex;
				margin: 3px;
				padding: 0;
			}

			li {
				cursor: pointer;
				list-style: none;
				width: 60px;
				text-align: center;
				height: 60px;
				border-radius: 5px;

				img {
					margin-top: 1px;
					width: 40px;
				}

				p {
					margin: 0;
					color: #748080;
					font-size: 12px;
				}
			}

		}
	}

	.search {
		display: flex;
		z-index: 2;
		justify-content: center;
		margin: 30px auto 0;

		.SearchOptions {
			padding-left: 20px;
			padding-right: 20px;
			height: 45px;
			background-color: #D5E1E0;
			border-radius: 30px 0 0 30px;
			line-height: 47px;

			:hover {
				opacity: 0.7;
				cursor: pointer;
			}

			img {
				width: 30px;
				margin-top: 7px;
				border-radius: 5px;
			}
		}

		.gotobox {
			display: flex;

			input {
				opacity: 0.7;
				height: 45px;
				border: 0;
				width: 30vw;
				outline: none;
			}

			.iconsearch {
				opacity: 0.7;
				width: 50px;
				height: 45px;
				background-color: white;
				border: 0;
				border-radius: 0 30px 30px 0;
				line-height: 47px;

				i {
					font-size: 20px;
					color: #739a99;
				}

				:hover {
					font-size: 25px;
					color: rgb(173, 174, 175);
				}
			}
		}
	}

	.loginbox {
		height: 50px;
		width: 70px;
		border-radius: 25px 0 0 25px;
		background: #D5E1E0;
		position: absolute;
		right: 0;
		top: 70px;

		.loginboxson {
			height: 44px;
			border-radius: 50%;
			width: 44px;
			line-height: 44px;
			margin: 3px;
			text-align: center;
			background: #739a99;
			color: #fff;
			cursor: pointer;
		}

		.userimgbtn {
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0);
			border: 0;
			margin: 3px;

			img {
				width: 44px;
				height: 44px;
				border-radius: 50%;
				text-decoration: none;
				// margin: 3px;
			}
		}

	}

	.urlbigbox {
		.el-button--text {
			margin-right: 15px;
		}

		.el-select {
			width: 300px;
		}

		.dialog-footer {
			display: flex;
			justify-content: center;
		}
	}

	.buttonStyle {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 18.2vw;
		border-radius: 3px;
		cursor: pointer;
		transition: all .3s;
		-moz-transition: all .3s;
		-webkit-transition: all .3s;
	}

	.foot {
		margin-top: 65px;
		z-index: 3;
		text-align: center;

		p {
			color: #fff;
			font-size: 13px;

			.iconspan {
				border-bottom: 1px solid #fff;
			}
		}

		.bannerbox {
			display: flex;
			justify-content: center;
		}

		.logobox {
			margin: 0px 10px;
			width: 45px;
			height: 40px;
			color: white;

			a {
				color: white;
				text-decoration: none;

				img {
					width: 45px;
					height: 45px;
				}
			}

			.addicom {
				margin-top: 5px;
				font-size: 50px;
				height: 60px;
				border-radius: 10px;
				border: 2px solid #D5E1E0;
			}

			span {
				color: white;
				opacity: 0.5;
			}
		}
	}

	// 登录
	.bigbox {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 11;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "Fira Sans", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		.closebtn {
			position: absolute;
			right: calc(50% - 160px);
			top: calc(50% - 260px);
			z-index: 2;
		}

		.form-structor {
			background-color: #222;
			border-radius: 15px;
			height: 550px;
			width: 350px;
			position: relative;
			overflow: hidden;
		}

		.form-structor::after {
			content: "";
			opacity: 0.8;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-repeat: no-repeat;
			background-position: left bottom;
			background-size: 500px;
			background-image: url("/img/32.jpg");
		}

		.form-structor .signup {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			width: 65%;
			z-index: 5;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .signup.slide-up {
			top: 5%;
			-webkit-transform: translate(-50%, 0%);
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .signup.slide-up .form-holder,
		.form-structor .signup.slide-up .submit-btn {
			opacity: 0;
			visibility: hidden;
		}

		.form-structor .signup.slide-up .form-title {
			font-size: 1em;
			cursor: pointer;
		}

		.form-structor .signup.slide-up .form-title span {
			margin-right: 5px;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .signup .form-title {
			color: #fff;
			font-size: 1.7em;
			text-align: center;
		}

		.form-structor .signup .form-title span {
			color: rgba(0, 0, 0, 0.4);
			opacity: 0;
			visibility: hidden;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .signup .form-holder {
			border-radius: 15px;
			background-color: #fff;
			overflow: hidden;
			margin-top: 10px;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .signup .form-holder .input {
			border: 0;
			outline: none;
			box-shadow: none;
			display: block;
			height: 30px;
			line-height: 30px;
			padding: 8px 15px;
			border-bottom: 1px solid #eee;
			width: 100%;
			font-size: 12px;
		}

		.form-structor .signup .form-holder .input:last-child {
			border-bottom: 0;
		}

		.form-structor .signup .form-holder .input::-webkit-input-placeholder {
			color: rgba(0, 0, 0, 0.4);
		}

		.form-structor .signup .submit-btn {
			background-color: rgba(0, 0, 0, 0.4);
			color: rgba(255, 255, 255, 0.7);
			border: 0;
			border-radius: 15px;
			display: block;
			margin: 15px auto;
			padding: 15px 45px;
			width: 100%;
			font-size: 13px;
			font-weight: bold;
			cursor: pointer;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .signup .submit-btn:hover {
			transition: all 0.3s ease;
			background-color: rgba(0, 0, 0, 0.8);
		}

		.form-structor .login {
			position: absolute;
			top: 20%;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			z-index: 5;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login::before {
			content: "";
			position: absolute;
			left: 50%;
			top: -20px;
			-webkit-transform: translate(-50%, 0);
			background-color: #fff;
			width: 200%;
			height: 250px;
			border-radius: 50%;
			z-index: 4;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login .center {
			position: absolute;
			top: calc(50% - 0%);
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			width: 65%;
			z-index: 5;
			-webkit-transition: all 0.3s ease;

			img {
				margin-top: 10px;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				margin-left: 30px;
			}

			.shangchuanbox {
				margin-top: 5px;
				display: flex;

				span {
					width: 150px;
				}
			}
		}

		.form-structor .login .center .form-title {
			color: #000;
			font-size: 1.7em;
			text-align: center;
		}

		.form-structor .login .center .form-title span {
			color: rgba(0, 0, 0, 0.4);
			opacity: 0;
			visibility: hidden;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login .center .form-holder {
			border-radius: 15px;
			background-color: #fff;
			border: 1px solid #eee;
			overflow: hidden;
			// margin-top: 10px;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login .center .form-holder .input {
			border: 0;
			outline: none;
			box-shadow: none;
			display: block;
			height: 30px;
			line-height: 30px;
			padding: 8px 15px;
			border-bottom: 1px solid #eee;
			width: 100%;
			font-size: 12px;
		}

		.form-structor .login .center .form-holder .input:last-child {
			border-bottom: 0;
		}

		.form-structor .login .center .form-holder .input::-webkit-input-placeholder {
			color: rgba(0, 0, 0, 0.4);
		}

		.form-structor .login .center .submit-btn {
			background-color: #6B92A4;
			color: rgba(255, 255, 255, 0.7);
			border: 0;
			border-radius: 15px;
			display: block;
			margin: 15px auto;
			padding: 15px 45px;
			width: 100%;
			font-size: 13px;
			font-weight: bold;
			cursor: pointer;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login .center .submit-btn:hover {
			transition: all 0.3s ease;
			background-color: rgba(0, 0, 0, 0.8);
		}

		.form-structor .login.slide-up {
			top: 95%;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login.slide-up .center {
			top: 10%;
			-webkit-transform: translate(-50%, 0%);
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login.slide-up .form-holder,
		.form-structor .login.slide-up .submit-btn {
			opacity: 0;
			visibility: hidden;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login.slide-up .form-title {
			font-size: 1em;
			margin: 0;
			padding: 0;
			cursor: pointer;
			-webkit-transition: all 0.3s ease;
		}

		.form-structor .login.slide-up .form-title span {
			margin-right: 5px;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all 0.3s ease;
		}
	}

	p {
		margin: 0;
	}

	.xiaozujianbigbox {
		margin: 73px auto;
		width: 70vw;
		min-width: 300px;
		height: 540px;
		position: relative;
		overflow: hidden;

		.xiaozujian {
			>div>div {
				box-shadow: 2px 2px 5px 1px #5f5f5f;
			}

			>div>p {
				text-shadow: 1px 2px 3px #555;
			}

			div>a>img {
				box-shadow: 2px 2px 5px 1px #5f5f5f;
			}

			font-size: 13px;
			line-height: 20px;

			.oneone {
				grid-row: span 1;
				grid-column: span 1;
				height: 90px;
				width: 90px;

				a {
					text-decoration: none;
					height: 90px;
					color: #fff;
					cursor: pointer;

					p {
						text-shadow: 1px 2px 3px #555;
					}

					img {
						width: 70px;
						height: 70px;
						border-radius: 15px;
					}

					p {
						line-height: 13px;
					}
				}
			}

			.twotwo {
				grid-row: span 2;
				grid-column: span 2;
				height: 180px;
				width: 180px;

				.gongde {
					height: 150px;
					width: 160px;
					padding-top: 10px;
					border-radius: 20px;
					background: #101010;
					margin: 0 auto;

					.gongdetext {
						font-size: 12px;
						border-radius: 8px;
						background: #FFF0E0;
						color: #4B2903;
						padding: 3px;
					}

					img {
						cursor: url('/img/bang.cur'), default;
						margin-top: 30px;
					}
				}

				.xiabantime {
					width: 150px;
					margin: 0 auto;
					height: 150px;
					padding: 5px;
					overflow: hidden;
					background: #fff;
					border-radius: 25px;

					span {
						display: inline-block;
						width: 150px;
						height: 50px;
						background-color: #333;
						color: #fff;
						font-weight: 900;
						/* 使方块中文字居中 */
						text-align: center;
						line-height: 50px;
						font-size: 30px;
						border-radius: 15px;
						margin: 20px auto;
					}

					.timesurebox {
						// display: flex;
						position: relative;

						.xuanzebox {
							width: 150px;
						}

						.btnbox {
							position: absolute;
							right: 0;
							top: 0;
							z-index: 5;
							background: #fff;
							border: 1px solid #c9cbcf;
							color: #595959;
							line-height: 30px;
							width: 30px;
							font-size: 12px;
							cursor: pointer;
							border-radius: 0 5px 5px 0;
						}
					}
				}

				.bilibili-box {
					margin: 0 auto;
					width: 160px;
					height: 160px;
					border-radius: 20px;
					background: linear-gradient(215.69deg, #FF7DB3 8.42%, #FFABC3 93.64%);

					.bili-top-box {
						display: flex;
						padding: 5px 10px;
						justify-content: space-between;

						.bili-top-inp {
							width: 100px;
							height: 25px;
							background-color: #ffffff80;
							color: #fff;
							border: none;
							border-radius: 18px;
							padding-left: 10px;
							padding-right: 10px;
						}

						.logo-box {
							width: 35px;
							height: 25px;
							background-color: #ffffff80;
							border-radius: 18px;
							text-align: center;
							line-height: 29px;

							img {
								width: 16px;
								transition: all .2s ease-in;
							}
						}
					}

					.bili-button-box {
						display: flex;
						justify-content: space-between;
						padding: 3px 10px;
						margin: 0 auto;

						a {
							text-decoration: none;
						}

						.bili-button-open {
							width: 55px;
							height: 25px;
							border-radius: 18px;
							background-color: #fff;
							font-size: 13px;
							color: #fb7299;
							text-align: center;
							line-height: 25px;
							font-weight: 500;
						}

						.bili-button-sart {
							width: 35px;
							height: 25px;
							border-radius: 18px;
							background-color: #ffffffb3;
							text-align: center;
						}

						.bili-button-collect {
							width: 35px;
							height: 25px;
							border-radius: 18px;
							background-color: #ffffffb3;
							text-align: center;
						}

						.bili-centre-box {
							text-align: center;
						}
					}
				}
			}

			.threetwo {
				grid-column: span 3;
				grid-row: span 2;
				width: 270px;
				height: 180px;

				.suibixiaoji {
					display: flex;
					margin: 0 auto;
					height: 159px;
					width: 250px;
					border-radius: 20px;
					background: #FFF;
					border-top: 1px solid#fff;

					.suibileft {
						border-radius: 10px;
						width: 50px;
						height: 120px;
						color: #6E6E6E;
						margin-left: 10px;

						p {
							margin-top: 20px;
							font-size: 16px;
							font-weight: 700;
						}

						.el-icon {
							font-size: 35px;
							color: #fff;
							background: #00A3FF;
							padding: 5px;
							border-radius: 50%;
							margin-top: 50px;
						}

						.el-icon:hover {
							padding: 7.5px;
							font-size: 30px;
						}
					}

					.suibiright {
						text-align: left;
						margin-left: 15px;

						p {
							margin: 10px 0;
							color: #6E6E6E;

							span {
								border: 3px solid #00A3FF;
								margin: 0 5px;
								border-radius: 3px;
							}
						}

						.suibiinput {
							width: 150px;
							height: 78px;
							border: 1px solid #bbb;
							border-radius: 12px;
							color: #6E6E6E;
							overflow: hidden;
							padding: 5px;
						}
					}

					.el-drawer {

						// z-index: 9999;
						.suibifabu {
							border-radius: 12px;
							width: 300px;
							outline: none;
						}

						.el-button {
							margin: 15px 0 20px 180px;
						}

						.suibilistbox {
							text-align: left;
							// align-items: flex-end;
							color: #000;

							.listflex {
								display: flex;
								border-top: 1px dashed #6E6E6E;

								.listsonbox {
									width: 250px;
								}

								.el-button {
									margin: 10px 0;
								}
							}
						}
					}
				}

				// 引导
				.yindao {
					margin: 0 auto;
					width: 230px;
					height: 150px;
					border-radius: 20px;
					padding: 10px 10px 0 10px;
					background: linear-gradient(180deg, #E4E4E4 0%, #a0a0a0 100%);
					color: #222;

					.first-lab {
						padding: 10px;
						display: flex;
						justify-content: space-between;

						span {
							font-weight: 600;
							font-size: 24px;
						}
					}

					.zujiankonhzhibox {
						height: 30px;
						width: 300px;
						color: #000;
						display: flex;
						justify-content: space-between;
						line-height: 30px;

						span {
							width: 85px;
							text-align: left;
							overflow: hidden;
						}
					}

					.first-options {
						display: flex;
						justify-content: center;
						color: #222;

						div {
							cursor: pointer;
							padding-top: 10px;
							text-align: center;
							font-size: 14px;
							font-weight: 600;
							width: 65px;
							height: 70px;
							border-radius: 12px;
							background: rgb(246, 246, 246);
							margin: 10px 6px;

							.icon:hover {
								color: #a0a0a0;
							}
						}
					}

					.first-options-childtwo {
						width: 980px;
						height: 590px;
						background-color: rgb(119, 187, 233);
						transform: translate(-50%, -50%);
						z-index: 1000;
						border-radius: 15px;
						position: fixed;
						left: 50vw;
						top: -35vh;
					}
				}
			}

			.twoone {
				grid-column: span 2;
				grid-row: span 1;
				height: 90px;
				width: 180;

				.moyurenriji {
					width: 150px;
					margin: 0 auto;
					height: 60px;
					background: #fff;
					border-radius: 15px;
					padding: 5px;
					color: #666;
					text-align: left;

					.moyutitbox {
						text-align: right;
					}
				}
			}

			text-align: center;
			max-height: 450px;
			color: #fff;
			display: grid;
			justify-content: center;
			grid-template-columns: repeat(auto-fill, 90px);
			grid-auto-rows: 90px;
			grid-auto-flow: dense;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 0;
			right: -23px;
			bottom: 0;
			overflow-x: hidden;
			overflow-y: scroll;
			z-index: 0;
		}
	}

}
</style>
